<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>事件处理</title>
</head>
<body>
    <div id="root">
       <h1>欢迎你，{{username}}</h1>
       <button @click="showMsg2(username)">点击显示提示信息</button>
       <!-- prevent阻止默认事件 -->
       <a href="http//www.baidu.com/" @click.prevent="showMsg2(username)">阻止默认事件</a>
       <!-- stop阻止事件冒泡 -->
       <a @click="showMsg2(username)">
        <button type="button" @click.stop="showMsg2(username)">阻止冒泡</button>
       </a>
       <!-- once事件只会触发一次 -->
       <button type="button" @click.once="showMsg2(username)">只触发一次</button>
       
    </div>

<script>
 let app = new Vue({
   el:'#root',
   data: {
      username:'张三' 
   },
   methods: {
      showMsg1(){
       alert("你好");
      },
      showMsg2(username){
        console.log(username);
       alert("你好"+username);
      }
   }
 });

 setTimeout(function(){
    console.log(app);
 },500);



</script>
</body>
</html>